  <!-- 经费模板管理 -->
<template>
  <div>
    <el-container>
      <el-header>
        <el-form
          ref="elForm"
          :model="FundingTempInfor"
          :rules="rules"
          size="medium"
          label-width="100px"
          :inline="true"
          label-position="left"
        >
          <el-form-item label="项目类别" prop="TypeId">
            <el-select
              clearable
              v-model="FundingTempInfor.TypeId"
              @change="typeProjectLevel()"
              placeholder="请选择"
            >
              <el-option
                v-for="item in TypeIdOptions"
                :key="item"
                :label="item.dicValue"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目级别" prop="LevelId">
            <el-select
              clearable
              v-model="FundingTempInfor.LevelId"
              @change="GetProjectSourcePart()"
              placeholder="请选择"
            >
              <el-option
                v-for="item in LevelIdOptions"
                :key="item"
                :label="item.dicValue"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源单位" prop="PartId">
            <el-select
              @change="giveTheIdToTable"
              clearable
              v-model="FundingTempInfor.PartId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in PartIdOptions"
                :key="item"
                :label="item.dicValue"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="success" @click="InsertTemplate()"
              >添加模板</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="loading"
          border
        >
          <el-table-column type="expand" width="55">
            <template #default="props">
              <el-table
                :data="props.row.children"
                style="width: 40%; margin-bottom: 20px; margin-left: 50px"
                row-key="budgetItemId"
                border
              >
                <el-table-column prop="budgetItemId" label="编号">
                </el-table-column>
                <el-table-column prop="budgetitemName" label="名称">
                </el-table-column>
                <el-table-column prop="budgetType" label="科目类型">
                  <template #default="scope">
                    <el-tag v-if="scope.row.budgetType" type="primary"
                      >直接费用</el-tag
                    >
                    <el-tag v-else type="success">间接费用</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="fundtemplateId" label="模板编号">
          </el-table-column>
          <el-table-column
            prop="fundtemplateName"
            label="模板名称"
            width="260px"
          >
            <template v-slot="scope">
              <span v-show="scope.row.state">
                {{ scope.row.fundtemplateName }}</span
              >
              <el-input
                type="text"
                v-model="scope.row.fundtemplateName"
                v-show="!scope.row.state"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fundtemplateState"
            width="200px;"
            label="经费模板状态"
          >
            <template v-slot="scope">
              <span v-show="scope.row.state">
                <el-tag v-if="scope.row.fundtemplateState == 0" type="primary"
                  >启用</el-tag
                >
                <el-tag v-else type="success">禁用</el-tag>
              </span>
              <el-switch
                v-model="scope.row.fundtemplateState"
                v-show="!scope.row.state"
                style="
                  --el-switch-on-color: #0dbc76;
                  --el-switch-off-color: #168eac;
                "
                :active-value="0"
                :inactive-value="1"
                active-text="启用"
                inactive-text="禁用"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fundtemplateFunsRatio"
            label="经费模板预算转换率"
            width="200px;"
          >
            <template v-slot="scope">
              <span v-show="scope.row.state">
                {{ scope.row.fundtemplateFunsRatio }}</span
              >
              <el-input
                type="text"
                v-model="scope.row.fundtemplateFunsRatio"
                v-show="!scope.row.state"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fundtemplateFunsRatioName"
            label="经费模板预算转换率单位"
            width="200px;"
          >
            <template v-slot="scope">
              <span v-show="scope.row.state">
                {{ scope.row.fundtemplateFunsRatioName }}</span
              >
              <el-input
                type="text"
                v-model="scope.row.fundtemplateFunsRatioName"
                v-show="!scope.row.state"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="isSupportingFunds"
            width="180px;"
            label="是否包含配套经费"
          >
            <template v-slot="scope">
              <span v-show="scope.row.state">
                <el-tag v-if="scope.row.isSupportingFunds" type="primary"
                  >是</el-tag
                >
                <el-tag v-else type="success">否</el-tag>
              </span>
              <el-switch
                v-model="scope.row.isSupportingFunds"
                v-show="!scope.row.state"
                style="
                  --el-switch-on-color: #0dbc76;
                  --el-switch-off-color: #168eac;
                "
                :active-value="true"
                :inactive-value="false"
                active-text="是"
                inactive-text="否"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                v-show="scope.row.state"
                >编辑</el-button
              >
              <el-button
                type="success"
                @click="hold(scope.$index, scope.row)"
                v-show="!scope.row.state"
                >保存</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="cancel(scope.$index, scope.row)"
                v-show="!scope.row.state"
                >取消</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="success"
                @click="AddItem(scope.$index, scope.row)"
                >配置科目</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog
        v-if="dialogVisible"
        v-model="dialogVisible"
        title="提示"
        width="80%"
        :before-close="handleClose">
          <FundingTempSubject></FundingTempSubject>
      </el-dialog>
  </div>
</template>
<style>
.background {
  width: 100%;
  height: 100%;
  background-color: rgb(167, 162, 162);
}
</style>
<script>
import  FundingTempSubject from "./FundingTempSubject";
export default {
/*   provide(){
      return{
        cid:this.id
      }
  }, */
  components: {
    FundingTempSubject
  },
  props: [],
  data() {
    return {
      loading: true,
      FundingTempInfor: {
        TypeId: "",
        LevelId: "",
        PartId: "",
      },
      tableData: [],
      id:0,
      dialogVisible:false,
      InsertTemplateData: {
        fundtemplateName: "",
        fundtemplateState: 0,
        fundtemplateFunsRatio: 0,
        fundtemplateFunsRatioName: "",
        isSupportingFunds: true,
        source: {
          templateId: "",
          sourcePartId: "",
        },
      },
      rules: {
        TypeId: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change",
          },
        ],
        LevelId: [
          {
            required: true,
            message: "请选择项目级别",
            trigger: "change",
          },
        ],
        PartId: [
          {
            required: true,
            message: "请选择项目来源单位",
            trigger: "change",
          },
        ],
      },
      TypeIdOptions: [],
      LevelIdOptions: [],
      PartIdOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loading = true;
    this.GetTypeList();
    this.giveTheIdToTable();
  },
  mounted() {},
  methods: {
    //获取项目类别列表
    GetTypeList() {
      let url =
        "http://localhost:9991/api/tb_project_sourceinfo/GetSourceList?dicCode=" +
        "XMLY";
      this.http.get(url, {}, true).then((res) => {
        this.TypeIdOptions = res.data;
      });
    },
    //获取项目级别列表
    typeProjectLevel() {
      console.log(this.FundingTempInfor.LevelId);
      this.http
        .get(
          "api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            this.FundingTempInfor.TypeId
        )
        .then((res) => {
          console.log(res);
          this.LevelIdOptions = res.data;
        });
    },
    //获取项目来源单位列表
    GetProjectSourcePart() {
      console.log(this.FundingTempInfor.LevelId);
      this.http
        .get(
          "api/tb_project_sourceinfo/GetSourceList?dicCode=" +
            this.FundingTempInfor.LevelId
        )
        .then((res) => {
          console.log(res);
          this.PartIdOptions = res.data;
        });
    },
    //获取模板列表信息
    giveTheIdToTable() {
      this.loading=true
      this.http
        .get(
          "api/tb_project_fundingtemplatesource_relation/GetProjectFundingTemplateBySourcePartAsync?SourceId=" +
            this.FundingTempInfor.PartId
        )
        .then((res) => {
          console.log(res.data);
          this.tableData = res.result.data;
        });
      this.loading = false;
    },
    /* 编辑 */
    handleEdit(index, row) {
      row.state = false;
    },
    cancel(index, row)
    {
       row.state = true;
    },
    /* 保存，新添加的或修改后的重新保存 */
    hold(index, row) {
      //有id序走修改
      if (row.fundtemplateId != undefined) {
        this.http
          .post("api/Tb_Project_Fundtemplate/UpdateFundingTemplateAsync", row)
          .then((res) => {
            console.log(res);
            if (res.status) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.giveTheIdToTable();
            } else {
              this.$message("保存失败");
            }
          });
      } //没id走添加
      else {
        this.InsertTemplateData.source.templateId = "123";
        this.InsertTemplateData.source.sourcePartId =
          this.FundingTempInfor.PartId;
        this.InsertTemplateData.fundtemplateFunsRatio =
          row.fundtemplateFunsRatio;
        this.InsertTemplateData.fundtemplateFunsRatioName =
          row.fundtemplateFunsRatioName;
        this.InsertTemplateData.fundtemplateName = row.fundtemplateName;
        this.InsertTemplateData.fundtemplateState = row.fundtemplateState;
        this.InsertTemplateData.isSupportingFunds = row.isSupportingFunds;

        this.http
          .post(
            "api/Tb_Project_Fundtemplate/InsertFundingTemplateAsync",
            this.InsertTemplateData
          )
          .then((res) => {
            console.log(res);
            if (res.status) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.giveTheIdToTable();
            } else {
              this.$message("添加失败");
            }
          });
      }
      row.state = true;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("确认删除该模板吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http
            .get(
              "api/Tb_Project_Fundtemplate/SoftDeleteFundingTemplateAsync?Id=" +
                row.fundtemplateId
            )
            .then((res) => {
              if (res.status) {
                this.giveTheIdToTable();
                this.$message({
                  type: "success",
                  message: res.message,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //添加Line
    InsertTemplate() {
      if (this.FundingTempInfor.PartId) {
        let obj = {
          fundtemplateName: "",
          fundtemplateFunsRatio: 0,
          fundtemplateFunsRatioName: "",
          isSupportingFunds: true,
          fundtemplateState: 0,
        };
        this.tableData.push(obj);
      } else {
        this.$message({
          type: "error",
          message: "请选择来源单位",
        });
        return;
      }
    },
    //添加模板科目
    AddItem(index, row) {
      /* this.$router.push("./FundingTempSubject?id=" + row.fundtemplateId); */
      this.id=row.fundtemplateId;
      localStorage.Fundingid=this.id
      this.dialogVisible=true;
    },
    /* //刷新
    Again()
    {
        this.dialogVisible=false;
        this.$router.push("./FundingTemplate")
    }, */
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
};
</script>